<script lang="ts" setup>
import { Skill } from "@/api/info/type";
import { useCharacterStore, useConfigStore } from "@/store";
import { getImage } from "@/utils";

const char = useCharacterStore();
const config = useConfigStore();
// style="border:2px solid #3e342a;border-radius: 8rpx;"

const currentSkill = function(skill:Skill,param:'lv'|'tp') {
      return computed({
        get() {
          let index = config.skills.findIndex(a=>a.skill == skill.name)
          if(index<0){
            index = config.skills.length
            config.skills.push({
              skill:skill.name,
              tp:0,
              lv:skill.maxLv
            })
          }
          return config.skills[index][param]
        },
        set(val) {
          val = val ?? 0
          let index = config.skills.findIndex(a=>a.skill==skill.name)
          val = Math.max(0,parseInt(val+''))
          if(param == 'lv'){
            val = Math.min(skill.maxLv,val)
          }
          if(param == 'tp'){
            val = Math.min(skill.maxTPLv,val)
          }
          if (index>=0){
            config.skills[index][param] = val
          }
        }
      })
    }

const changeLv = (skill:Skill,type:"lv"|"tp"="lv",value:number=0)=>{
  currentSkill(skill,type).value += value
}
</script>

<template>
  <view>
    <view v-for="skill in char.skills" :id="skill.name">
      <view class="flex items-center h-auto my-5px" >
          <image style="border:1px solid #caa365;border-radius: 22px;padding: 2px;background: black;" class="w-40px h-40px" :src="getImage(skill.icon)"></image>
        <text class="w-150rpx ml-20rpx text-hex-e5ca35 text-right">{{ skill.name }}</text>
        <view class="flex justify-center items-center ml-20rpx"  >
          <view class="LvButton" @click="changeLv(skill,'lv',-1)">
            <image
              class="h-18rpx w-18rpx"
              :src="getImage('/ui/GLBUI_Common_IconMinus.png')"
              style="position: relative;"
            >
            </image
          ></view>
          <input
            type="number"
            class="w-90rpx h-45rpx mx-15rpx"
            v-model="currentSkill(skill,'lv').value"
            style="
              border: 2rpx solid rgba(255, 255, 255, 0.15);
              border-radius: 8rpx;
              background-color: #18130f;
              text-align: center
            "
          />
          <view class="LvButton"  @click="changeLv(skill,'lv',1)"
            ><image
              class="h-18rpx w-18rpx"
              :src="getImage('/ui/GLBUI_Common_IconPlus.png')"
            ></image>
          </view>
        </view>
        <view class="flex justify-center items-center ml-20rpx" v-if="skill.maxTPLv > 0">
          <view class="LvButton"  @click="changeLv(skill,'tp',-1)"
            ><image
              class="h-18rpx w-18rpx"
              :src="getImage('/ui/GLBUI_Common_IconMinus.png')"
            ></image
          ></view>
          <input
            type="number"
            class="w-90rpx h-45rpx mx-15rpx"
            v-model="currentSkill(skill,'tp').value"
            style="
              border: 2rpx solid rgba(255, 255, 255, 0.15);
              border-radius: 8rpx;
              background-color: #18130f;
              text-align: center
            "
          />
          <view class="LvButton"  @click="changeLv(skill,'tp',1)"
            ><image
              class="h-18rpx w-18rpx"
              :src="getImage('/ui/GLBUI_Common_IconPlus.png')"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.LvButton {
  height: 30rpx;
  width: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  border: 1px solid #a78c56;
  color: #ece4d3;
  background: linear-gradient(to bottom, #7f673a, #99814f);
  font-size: 35rpx;
}

.TpButton {
  height: 30rpx;
  width: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  border: 1px solid black;
  color: #ece4d3;
  background: linear-gradient(to bottom, #00bd00, #006600);
  font-size: 35rpx;
}
</style>
